<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<header>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>知识星球</title>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">

    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/jquery-3.5.1.js}"></script>
    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>

    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>
    <script th:src="@{/assets/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>


</header>
<body>
<!-- Header Section Start -->
<div class="header section" th:replace="~{common/head::head}"></div>
<!-- Header Section End -->

<!-- Breadcrumb Area Start -->
<div class="section breadcrumb-area bg-name-bright">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="breadcrumb-wrapper">
                    <h2 class="breadcrumb-title">知识星球</h2>
                    <ul>
                        <li><a th:href="@{/goods/show}" style="font-size:16px">首页</a></li>
                        <li style="font-size:14px">知识星球</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Breadcrumb Area End -->

<div class="row container flex-column flex-md-row" style="margin:auto">
    <form th:action="@{/article/list}" id="selArt">
        <!--Shop Top Bar Left start -->
        <div class="col-lg-6 col-12">
            <ul class="nav nav-tabs" name="artTypeId" style="display: inline">
                <li role="presentation" id="whole" value="0" style="font-size: 36px;width:160px;text-align: center"
                    class="active"><a href="javascript:void(0)" onclick="WHOLE()">精选</a></li>
                <li role="presentation" id="cat" value="2" style="font-size: 36px;width:160px;text-align: center"
                    th:onclick="cat()"><a href="javascript:void(0)">喵星球</a></li>
                <li role="presentation" id="dog" value="1" style="font-size: 36px;width:160px;text-align: center"><a
                        href="javascript:void(0)" onclick="DOG()">汪星球</a></li>
            </ul>
        </div>
        <!-- Shop Top Bar Left end -->
        <!-- 板块右边下拉框 -->
        <div class="col-lg-6 col-12">
            <div class="col-5" style="float: left;margin-top: 15px">
                <div style="float: left">
                    <h4 style="height: 40px;line-height: 40px">排序方式:</h4>
                </div>
                <div style="float: right; width: 130px; margin-right: 20px">
                    <select id="type" th:onchange="selT()" class="nice-select" name="type" aria-label=".form-select-sm example" style="width: 130px">
                        <option value="0" th:selected="${type==0}">最近时间</option>
                        <option value="1" th:selected="${type==1}">最多收藏</option>
                        <option value="2" th:selected="${type==2}">最多浏览</option>
                    </select>
                </div>
            </div>
            <div class="col-7" style="float: right;margin-top: 15px">
                <div class="widget-list">
                    <div style="display: inline-block;height: 42px;line-height: 32px">
                        <div style="float: right; width: 250px">
                            <div style="float: left; width: 160px">
                                <div style="float: left">
                                    <span style="height: 40px;font-size: 15px; line-height: 40px">
                                        关键词：
                                    </span>
                                </div>
                                <div style="float:right;">
                                    <input type="text" class="form-control" placeholder="搜索关键词"  style="border-radius: 8px; width: 100px; height: 42px" th:value="${articleContent}" id="articleContent">
                                </div>
                            </div>
                            <div style="float:right;margin-top: 8px; right: 5px">
                                <button type="button" onclick="selA()" style="border-width: 1px; border-radius: 10px; height: 30px;width: 60px; background: #6bbabe">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Shopt Top Bar Right End -->
    </form>
</div>

<!-- Shop Section Start -->
<div class="section section-margin">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-12">
                <div class="row row-cols-lg-2 row-cols-sm-2 row-cols-1 m-b-n40">
                    <div class="col m-b-40" th:each="a:${pageInfo.list}">
                        <!-- Single Blog Start -->
                        <div class="single-blog-wrapper">
                            <!-- Blog Thumb Start 图片和跳转页面-->
                            <div class="blog-thumb thumb-effect">
                                <a href="#" th:if="${session.user != null}">
                                    <a class="image"
                                       th:href="@{artcleDetails(articleId=${a.articleId},userId=${session.user.userId})}">
                                        <img class="fit-image" th:src="'http://localhost:8080/uploadFile/article/'+${a.articleImgpath}"
                                             alt="Blog Image">
                                    </a>
                                </a>
                                <a href="#" th:if="${session.user == null}">
                                    <a class="image" th:href="@{artcleDetails(articleId=${a.articleId},userId=0)}">
                                        <img class="fit-image" th:src="'http://localhost:8080/uploadFile/article/'+${a.articleImgpath}"
                                             alt="Blog Image">
                                    </a>
                                </a>
                            </div>
                            <!-- Blog Thumb End -->

                            <!-- Blog Content Start -->
                            <div class="blog-content">
                                <div class="blog-meta">
                                    <span>类型:</span>
                                    <span th:text="${a.articleLabel}"></span>
                                    <span th:text="${#dates.format(a.createTime,'yyyy-MM-dd')}"
                                          style="float: right"></span>
                                </div>
                                <h2 class="blog-title"><span th:text="${a.articleTitle}"></span></h2>
                                <p th:text="${a.articleContent}"
                                   style="width:350px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis"></p>
                                <a href="#" th:if="${session.user != null}">
                                    <a class="more-link"
                                       th:href="@{artcleDetails(articleId=${a.articleId},userId=${session.user.userId})}">
                                        查看详情
                                    </a>
                                </a>
                                <a href="#" th:if="${session.user == null}">
                                    <a class="more-link" th:href="@{artcleDetails(articleId=${a.articleId},userId=0)}">
                                        查看详情
                                    </a>
                                </a>
                            </div>
                            <!-- Blog Content End -->
                        </div>
                        <!-- Single Blog End -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 m-t-50">
                        <nav class="d-flex justify-content-center">
                            <ul class="pagination">
                                当前[[${pageInfo.pageNum}]]/[[${pageInfo.pages}]]页&nbsp;&nbsp;
                                共[[${pageInfo.total}]]条记录&nbsp;
                                <a th:href="@{/article/list(currentPage=1,articleTitle=${articleTitle},artTypeList=${artTypeList},type=${type})}">首页</a>&nbsp;&nbsp;
                                <a th:href="@{/article/list(currentPage=${pageInfo.prePage},articleTitle=${articleTitle},artTypeList=${artTypeList},type=${type})}">上一页</a>&nbsp;&nbsp;
                                <a th:href="@{/article/list(currentPage=${pageInfo.nextPage},articleTitle=${articleTitle},artTypeList=${artTypeList},type=${type})}">下一页</a>&nbsp;&nbsp;
                                <a th:href="@{/article/list(currentPage=${pageInfo.pages},articleTitle=${articleTitle},artTypeList=${artTypeList},type=${type})}">尾页</a>&nbsp;&nbsp;
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-12" id="hot">
                <div>
                    <h1 style="margin-bottom: 30px; font-size: 35px">热门文章</h1>
                    <ul>
                        <li v-for="a in aList" style="height: 40px">
                            <a href="javascript:void(0)" onclick="go(this)" :id="a.articleId" style="font-size: 18px; font-family: 微软雅黑; color: #0ddbc0">{{a.articleTitle}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Shop Section End -->
<!-- Footer Section Start -->
<footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>
<!-- Footer Section End -->
<!-- Scroll Top Start -->
<a href="#" class="scroll-top show" id="scroll-top">
    <i class="arrow-top ti-angle-double-up"></i>
    <i class="arrow-bottom ti-angle-double-up"></i>
</a>
<!-- Scroll Top End -->
<!-- Vendor JS -->
<script th:inline="javascript">
    $(function () {
        console.log([[${artTypeId}]]);
        if ([[${artTypeId}]] == 0) {
            $("#whole").addClass("active");
            $("#cat").removeClass("active");
            $("#dog").removeClass("active");
        } else if ([[${artTypeId}]] == 1) {
            $("#dog").addClass("active");
            $("#cat").removeClass("active");
            $("#whole").removeClass("active");
        } else if ([[${artTypeId}]] == 2) {
            $("#cat").addClass("active");
            $("#whole").removeClass("active");
            $("#dog").removeClass("active");
        }
    })

    function WHOLE() {
        let artTypeId = $("#whole").val();
        location.href = [[@{/article/list}]]
        +"?currentPage=" + [[${pageInfo.pageNum}]] +
        "&pageSize=" + [[${pageInfo.pageSize}]] + "&articleContent=" + [[${articleContent}]] +
        "&artTypeId=" + artTypeId + "&type=" + [[${type}]];
    }

    function cat() {
        let artTypeId = $("#cat").val();
        console.log(artTypeId)
        location.href = [[@{/article/list}]]
        +"?currentPage=" + [[${pageInfo.pageNum}]] +
        "&pageSize=" + [[${pageInfo.pageSize}]] + "&articleContent=" + [[${articleContent}]] +
        "&artTypeId=" + artTypeId + "&type=" + [[${type}]];
    }

    function DOG() {
        let artTypeId = $("#dog").val();
        location.href = [[@{/article/list
    }]]
        +"?currentPage=" + [[${pageInfo.pageNum}]] +
        "&pageSize=" + [[${pageInfo.pageSize}]] + "&articleContent=" + [[${articleContent}]] +
        "&artTypeId=" + artTypeId + "&type=" + [[${type}]];
    }

    function selA() {
        let articleContent = $("#articleContent").val();
        location.href = [[@{/article/list}]]
        +"?currentPage=" + [[${pageInfo.pageNum}]] +
        "&pageSize=" + [[${pageInfo.pageSize}]] + "&articleContent=" + articleContent +
        "&artTypeId=" + [[${artTypeId}]] + "&type=" + [[${type}]];
    }

    function selT() {
        this.type = $("#type").val()
        console.log(type+">>>>>>>>>>>>>>>>")
        location.href = [[@{/article/list}]]
        +"?currentPage=" + [[${pageInfo.pageNum}]] +
        "&pageSize=" + [[${pageInfo.pageSize}]] + "&articleContent=" + [[${articleContent}]]+
        "&artTypeId=" + [[${artTypeId}]] + "&type=" + type;

    }



    function go(obj) {
        let aId = obj.id
        if ([[${session.user}]]!=null){
            let user=[[${session.user}]]
            location="Http://localhost:9001/article/artcleDetails?articleId="+aId+"&userId="+user.userId
        }else {
            location="Http://localhost:9001/article/artcleDetails?articleId="+aId+"&userId=0"
        }
    }


    new Vue({
        el:"#hot",
        data:{
            aList: []
        },
        created(){
            axios.get("Http://localhost:9001/article/hot").then((res)=>{
                console.log(res);
                this.aList = res.data.data
            })
        }
    })

</script>
</body>

</html>